<template>
    <div class="allContainer">
        <div class="searchContainer">
            <span class="inputLabel">微服务</span>
            <el-select v-model="applicationData.dockerContainerId" placeholder="微服务" class="searchInfoInput" clearable>
                <el-option :label="item.dockerName" :value="item.dockerContainerId" v-for="item in containerList" :key="item.id"/>
            </el-select>

            <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryDeployLog()">查询部署日志</el-button>
        </div>
        <div class="deployStepContainer">
            <div class="stepHeaderContainer">
                <div class="stepInfoClass">
                    <component :is="step1ComponentIcon" :class="step1ComponentClass"/>
                    <span :class="step1SpanClass">构建</span>
                </div>
                <div class="stepSplitClass">
                    <component is="RightOutlined" class="stepSplitClassSpan"/>
                </div>
                <div class="stepInfoClass">
                    <component :is="step2ComponentIcon" :class="step2ComponentClass"/>
                    <span :class="step2SpanClass">推包</span>
                </div>
                <div class="stepSplitClass">
                    <component is="RightOutlined" class="stepSplitClassSpan"/>
                </div>
                <div class="stepInfoClass">
                    <component :is="step3ComponentIcon" :class="step3ComponentClass"/>
                    <span :class="step3SpanClass">实例部署</span>
                </div>
            </div>
            <div class="stepInfoContainer">
                <div class="stepInfoClass">
                    <el-card style="width: 100%">
                        <el-steps direction="vertical" :active="step1Active - 1" space="200px" finish-status="success">
                            <el-step title="代码仓拉取" :status="step1GitPullInfo ? (step1GitPullInfo.pipeLineStatus === 'ERROR' ? 'error' : '') : ''">
                                <template #description>
                                    <span v-if="step1GitPullInfo !== ''">启动时间：{{step1GitPullInfo.startTime}}</span>
                                    <br />
                                    <span v-if="step1GitPullInfo !== ''">拉取路径：{{step1GitPullInfo.gitPath}}</span>
                                    <br />
                                    <span v-if="step1GitPullInfo !== ''">结束时间：{{step1GitPullInfo.endTime}}</span>
                                    <br />
                                    <span v-if="step1GitPullInfo !== ''">执行内容：{{step1GitPullInfo.pipeLineResStr}}</span>
                                </template>
                            </el-step>
                            <el-step title="maven构建" :status="step1MavenBuildInfo ? (step1MavenBuildInfo.pipeLineStatus === 'ERROR' ? 'error' : '') : ''">
                                <template #description>
                                    <span v-if="step1MavenBuildInfo !== ''">启动时间：{{step1MavenBuildInfo.startTime}}</span>
                                    <br />
                                    <span v-if="step1MavenBuildInfo !== ''">构建路径：{{step1MavenBuildInfo.pomPath}}</span>
                                    <br />
                                    <span v-if="step1MavenBuildInfo !== ''">结束时间：{{step1MavenBuildInfo.endTime}}</span>
                                    <br />
                                    <span v-if="step1MavenBuildInfo !== ''">执行内容：</span>
                                    <br />
                                    <span v-if="step1MavenBuildInfo !== ''">
                                        <span v-if="step1MavenBuildInfo.pipeLineResStr" v-for="(value, index) in step1MavenBuildInfo.pipeLineResStr.split('\n')" :key="index">
                                            {{value}} <br />
                                        </span>
                                        <span v-if="!step1MavenBuildInfo.pipeLineResStr">

                                        </span>
                                    </span>
                                </template>
                            </el-step>
                        </el-steps>
                    </el-card>
                </div>
                <div class="stepSplitClass">
                </div>
                <div class="stepInfoClass">
                    <el-card style="width: 100%">
                        <el-steps direction="vertical" :active="step2Active - 1" space="200px" finish-status="success">
                            <el-step title="jar包推送" :status="step2PushJarInfo ? (step2PushJarInfo.pipeLineStatus === 'ERROR' ? 'error' : '') : ''">
                                <template #description>
                                    <span v-if="step2PushJarInfo !== ''">启动时间：{{step2PushJarInfo.startTime}}</span>
                                    <br />
                                    <span v-if="step2PushJarInfo !== ''">部署包名：{{step2PushJarInfo.pushJarName}}</span>
                                    <br />
                                    <span v-if="step2PushJarInfo !== ''">结束时间：{{step2PushJarInfo.endTime}}</span>
                                    <br />
                                    <span v-if="step2PushJarInfo !== ''">执行内容：{{step2PushJarInfo.pipeLineResStr}}</span>
                                </template>
                            </el-step>
                        </el-steps>
                    </el-card>
                </div>
                <div class="stepSplitClass">
                </div>
                <div class="stepInfoClass">
                    <el-card style="width: 100%">
                        <el-steps direction="vertical" :active="step3Active - 1" space="200px" finish-status="success">
                            <el-step title="实例部署" :status="step3DeployInfo ? (step3DeployInfo.pipeLineStatus === 'ERROR' ? 'error' : '') : ''">
                                <template #description>
                                    <span v-if="step3DeployInfo !== ''">启动时间：{{step3DeployInfo.startTime}}</span>
                                    <br />
                                    <span v-if="step3DeployInfo !== ''">实例名称：{{step3DeployInfo.dockerName}}</span>
                                    <br />
                                    <span v-if="step3DeployInfo !== ''">结束时间：{{step3DeployInfo.endTime}}</span>
                                    <br />
                                    <span v-if="step3DeployInfo !== ''">执行内容：{{step3DeployInfo.pipeLineResStr}}</span>
                                </template>
                            </el-step>
                        </el-steps>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script name="ContainerPipelineManage" setup lang="ts">
import {createTag} from "@/utils/ywuCommon";
import {containerBuildStepInfo, containerInfoQuery} from "@/request/container";
import {computed, ref} from "vue";
import {useRoute} from "vue-router";

let applicationData = ref({
    dockerContainerId: ""
});
let stepData = ref({});
let timer = ref(null);
let containerList = ref([]);
let searchLoading = ref(false);

// 创建标签
let route = useRoute();
createTag(route);

// 查询容器
containerInfoQuery({}).then(res => {
    if (res["code"] === '200') {
        containerList.value = res.data
    }
});

let step1ComponentClass = computed(() => {
    if (!stepData.value) {
        return "stepInfoIconClassCommon";
    }
    if (stepData.value["currentStep"] === 1) {
        let stepDataMap = stepData.value;
        let step = stepDataMap["stepMap"]
        if (!step) {
            return "stepInfoIconClassCommon";
        }
        if (step['1']["stepStatus"] === "ERROR") {
            return "stepInfoIconClassError";
        } else {
            return "stepInfoIconClassCurrent";
        }
    } else {
        if (stepData.value["currentStep"] > 1) {
            return "stepInfoIconClassSuccess";
        } else {
            return "stepInfoIconClassCommon";
        }
    }
})

let step2ComponentClass = computed(() => {
    if (!stepData.value) {
        return "stepInfoIconClassCommon";
    }
    if (stepData.value["currentStep"] === 2) {
        let stepDataMap = stepData.value;
        let step = stepDataMap["stepMap"]
        if (!step) {
            return "stepInfoIconClassCommon";
        }
        if (step['2']["stepStatus"] === "ERROR") {
            return "stepInfoIconClassError";
        } else {
            return "stepInfoIconClassCurrent";
        }
    } else {
        if (stepData.value["currentStep"] > 2) {
            return "stepInfoIconClassSuccess";
        } else {
            return "stepInfoIconClassCommon";
        }
    }
})

let step3ComponentClass = computed(() => {
    if (!stepData.value) {
        return "stepInfoIconClassCommon";
    }
    if (stepData.value["currentStep"] === 3) {
        let stepDataMap = stepData.value;
        let step = stepDataMap["stepMap"]
        if (!step) {
            return "stepInfoIconClassCommon";
        }
        if (step['3']["stepStatus"] === "ERROR") {
            return "stepInfoIconClassError";
        } else {
            return "stepInfoIconClassCurrent";
        }
    } else {
        if (stepData.value["currentStep"] > 3) {
            return "stepInfoIconClassSuccess";
        } else {
            return "stepInfoIconClassCommon";
        }
    }
})

let step1SpanClass = computed(() => {
    if (!stepData.value) {
        return "stepInfoSpanClassCommon";
    }
    if (stepData.value["currentStep"] === 1) {
        let stepDataMap = stepData.value;
        let step = stepDataMap["stepMap"]
        if (!step) {
            return "stepInfoSpanClassCommon";
        }
        if (step['1']["stepStatus"] === "ERROR") {
            return "stepInfoSpanClassError";
        } else {
            return "stepInfoSpanClassCurrent";
        }
    } else {
        if (stepData.value["currentStep"] > 1) {
            return "stepInfoSpanClassSuccess";
        } else {
            return "stepInfoSpanClassCommon";
        }
    }
})

let step2SpanClass = computed(() => {
    if (!stepData.value) {
        return "stepInfoSpanClassCommon";
    }
    if (stepData.value["currentStep"] === 2) {
        let stepDataMap = stepData.value;
        let step = stepDataMap["stepMap"]
        if (!step) {
            return "stepInfoSpanClassCommon";
        }
        if (step['2']["stepStatus"] === "ERROR") {
            return "stepInfoSpanClassError";
        } else {
            return "stepInfoSpanClassCurrent";
        }
    } else {
        if (stepData.value["currentStep"] > 2) {
            return "stepInfoSpanClassSuccess";
        } else {
            return "stepInfoSpanClassCommon";
        }
    }
});

let step3SpanClass = computed(() => {
    if (!stepData.value) {
        return "stepInfoSpanClassCommon";
    }
    if (stepData.value["currentStep"] === 3) {
        let stepDataMap = stepData.value;
        let step = stepDataMap["stepMap"]
        if (!step) {
            return "stepInfoSpanClassCommon";
        }
        if (step['3']["stepStatus"] === "ERROR") {
            return "stepInfoSpanClassError";
        } else {
            return "stepInfoSpanClassCurrent";
        }
    } else {
        if (stepData.value["currentStep"] > 3) {
            return "stepInfoSpanClassSuccess";
        } else {
            return "stepInfoSpanClassCommon";
        }
    }
});

let step1ComponentIcon = computed(() => {
    if (!stepData.value) {
        return "ClockCircleOutlined";
    }
    if (stepData.value["currentStep"] === 1) {
        let stepDataMap = stepData.value;
        let step = stepDataMap["stepMap"]
        if (!step) {
            return "ClockCircleOutlined";
        }
        if (step['1']["stepStatus"] === "ERROR") {
            return "CloseCircleOutlined";
        } else {
            return "LoadingOutlined";
        }
    } else {
        if (stepData.value["currentStep"] > 1) {
            return "CheckCircleOutlined";
        } else {
            return "ClockCircleOutlined";
        }
    }
});

let step2ComponentIcon = computed(() => {
    if (!stepData.value) {
        return "ClockCircleOutlined";
    }
    if (stepData.value["currentStep"] === 2) {
        let stepDataMap = stepData.value;
        let step = stepDataMap["stepMap"]
        if (!step) {
            return "ClockCircleOutlined";
        }
        if (step['2']["stepStatus"] === "ERROR") {
            return "CloseCircleOutlined";
        } else {
            return "LoadingOutlined";
        }
    } else {
        if (stepData.value["currentStep"] > 2) {
            return "CheckCircleOutlined";
        } else {
            return "ClockCircleOutlined";
        }
    }
});

let step3ComponentIcon = computed(() => {
    if (!stepData.value) {
        return "ClockCircleOutlined";
    }
    if (stepData.value["currentStep"] === 3) {
        let stepDataMap = stepData.value;
        let step = stepDataMap["stepMap"]
        if (!step) {
            return "ClockCircleOutlined";
        }
        if (step['3']["stepStatus"] === "ERROR") {
            return "CloseCircleOutlined";
        } else {
            return "LoadingOutlined";
        }
    } else {
        if (stepData.value["currentStep"] > 3) {
            return "CheckCircleOutlined";
        } else {
            return "ClockCircleOutlined";
        }
    }
});

let step1GitPullInfo = computed(() => {
    if (!stepData.value) {
        return {};
    }
    let stepDataMap = stepData.value;
    let step = stepDataMap["stepMap"]
    if (!step) {
        return {};
    }
    return step['1']["stepEntities"][0];
})

let step1MavenBuildInfo = computed(() => {
    if (!stepData.value) {
        return {};
    }
    let stepDataMap = stepData.value;
    let step = stepDataMap["stepMap"]
    if (!step) {
        return {};
    }
    if (step['1']["stepEntities"].length < 2) {
        return {};
    }
    return step['1']["stepEntities"][1];
})

let step2PushJarInfo = computed(() => {
    if (!stepData.value) {
        return {};
    }
    let stepDataMap = stepData.value;
    let step = stepDataMap["stepMap"]
    if (!step) {
        return {};
    }
    if (!step['2']) {
        return {};
    }
    return step['2']["stepEntities"][0];
});

let step3DeployInfo = computed(() => {
    if (!stepData.value) {
        return {};
    }
    let stepDataMap = stepData.value;
    let step = stepDataMap["stepMap"]
    if (!step) {
        return {};
    }
    if (!step['3']) {
        return {};
    }
    return step['3']["stepEntities"][0];
})

let step1Active = computed(() => {
    if (!stepData.value) {
        return -1;
    }
    let stepDataMap = stepData.value;
    let step = stepDataMap["stepMap"]
    if (!step) {
        return -1;
    }
    return step['1']["currentSonStep"];
});

let step2Active = computed(() => {
    if (!stepData.value) {
        return -1;
    }
    let stepDataMap = stepData.value;
    let step = stepDataMap["stepMap"]
    if (!step) {
        return -1;
    }
    if (!step['2']) {
        return -1;
    }
    if (!(step['2']["currentSonStep"])) {
        return -1;
    }
    return step['2']["currentSonStep"];
});

let step3Active = computed(() => {
    if (!stepData.value) {
        return -1;
    }
    let stepDataMap = stepData.value;
    let step = stepDataMap["stepMap"]
    if (!step) {
        return -1;
    }
    if (!step['3']) {
        return -1;
    }
    if (!(step['3']["currentSonStep"])) {
        return -1;
    }
    return step['3']["currentSonStep"];
})

function queryDeployLog() {
    searchLoading.value = true
    if (applicationData.value.dockerContainerId !== "") {
        containerBuildStepInfo(applicationData.value).then(res => {
            if (!res.data) {
                stepData.value = res.data;
                return;
            }
            if (res.data["currentStep"] < 4) {
                resetTimer();
            }
            stepData.value = res.data;
            searchLoading.value = false;
        })
    }
}

function resetTimer() {
    if (timer.value !== null) {
        return;
    }
    timer.value = setInterval(() => {
        if (applicationData.value.dockerContainerId !== "") {
            containerBuildStepInfo(applicationData.value).then(res => {
                if (!res.data) {
                    stepData.value = res.data;
                    return;
                }
                if (stepData.value["currentStep"] >= 4) {
                    clearInterval(timer.value);
                    timer.value = null;
                }
                if (stepData.value["pipeLineStatus"] === "ERROR") {
                    clearInterval(timer.value);
                    timer.value = null;
                }
                stepData.value = res.data;
            })
        }
    }, 2000);
}
</script>

<style scoped lang="less">
.allContainer {
    width: 98%;
    height: 100%;
    margin: 1% 0.2%;
    overflow-y: scroll;
    .searchContainer {
        width: 100%;
        height: 10%;
        .searchInfoInput {
            width: 20%;
            padding-left: 1%;
        }
        .inputLabel {
            padding-left: 1%;
            font-weight: 700;
            font-size: 15px;
            color: #606266;
            //去除光标
            caret-color: transparent;
        }
        .searchButtonClass {
            margin-left: 1%;
        }
    }
    .deployStepContainer {
        margin: 1% 0.2% 0.2%;
        width: 98%;
        height: 80vh;
        .stepHeaderContainer {
            margin-left: 2%;
            width: 98%;
            height: 5%;
            background-color: #f5f7fa;
            display: flex;
            align-items: center;
            .stepInfoClass {
                width: 30%;
                display: flex;
                align-items: center;
                justify-content: center;
                .stepInfoIconClassSuccess {
                    font-size: 25px;
                    color: #069f06;
                }
                .stepInfoIconClassError {
                    font-size: 25px;
                    color: #ef0428;
                }
                .stepInfoIconClassCurrent {
                    font-size: 25px;
                }
                .stepInfoIconClassCommon {
                    font-size: 25px;
                    color: #a8abb2;
                }
                .stepInfoSpanClassSuccess {
                    padding-left: 2%;
                    color: #069f06;
                }
                .stepInfoSpanClassError {
                    padding-left: 2%;
                    color: #ef0428;
                }
                .stepInfoSpanClassCurrent {
                    padding-left: 2%;
                }
                .stepInfoSpanClassCommon {
                    padding-left: 2%;
                    color: #a8abb2;
                }
            }
            .stepSplitClass {
                width: 3%;
                display: flex;
                align-items: center;
                justify-content: center;
                .stepSplitClassSpan {
                    font-size: 20px;
                    color: #737070FF;
                }
            }
        }
        .stepInfoContainer {
            margin-top: 2%;
            margin-left: 2%;
            width: 98%;
            display: flex;
            .stepInfoClass {
                width: 30%;
                display: flex;
                .stepInfoIconClassSuccess {
                    font-size: 25px;
                    color: #069f06;
                }
                .stepInfoIconClassCurrent {
                    font-size: 25px;
                }
                .stepInfoIconClassCommon {
                    font-size: 25px;
                }
                .stepInfoSpanClassSuccess {
                    padding-left: 2%;
                    color: #069f06;
                }
                .stepInfoSpanClassCurrent {
                    padding-left: 2%;
                }
                .stepInfoSpanClassCommon {
                    padding-left: 2%;
                }
            }
            .stepSplitClass {
                width: 3%;
                display: flex;
                align-items: center;
                justify-content: center;
                .stepSplitClassSpan {
                    font-size: 40px;
                    color: #737070FF;
                }
            }
        }
    }
}

</style>